<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工具页面</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/main.js"></script>
</head>
<body>
<div class="container-fluid">
    <header>
        <nav>
            <ul>
                <li><a href="#mysql">MySQL查询工具</a></li>
                <li><a href="#xmind">XMind转换工具</a></li>
                <li><a href="#testcase">测试点生成工具</a></li>
            </ul>
        </nav>
    </header>

    <section id="mysql">
        <h2>MySQL查询工具</h2>
        <div class="mysql-tool card">
            <div class="db-row" style="display: flex; gap: 24px; align-items: flex-start;">
                <div class="db-select card-body" style="flex: 1; display: flex; flex-direction: column; height: 260px;">
                    <h3 style="flex-shrink: 0;">选择数据库</h3>
                    <div class="scrollable" style="flex: 1; overflow-y: auto; min-height: 0;">
                        <ul id="dataSourceList"></ul>
                    </div>
                    <button type="button" class="btn" style="flex-shrink: 0; margin-bottom: 8px;">加载表</button>
                </div>
                <div class="table-list card-body" style="flex: 2;">
                    <h3>数据库表列表</h3>
                    <div class="scrollable">
                        <ul id="tableList"></ul>
                    </div>
                </div>
            </div>
            <div class="table-structures" id="tableStructures" style="display: flex; gap: 16px; margin-top: 20px;"></div>
            <div class="generate-section">
                <h3>生成SQL</h3>
                <label for="promptInput">输入提示：</label>
                <textarea id="promptInput" rows="3" placeholder="输入生成SQL的描述..."></textarea>
                <div class="selected-tables">
                    <p>已选表：</p>
                    <ul id="selectedTablesList"></ul>
                </div>
                <button id="generateSqlBtn">生成SQL</button>
            </div>
            <div class="sql-editor">
                <textarea id="sqlTextarea" class="CodeMirror" placeholder="生成或输入SQL语句..."></textarea>
                <button type="button" id="executeSql">执行SQL</button>
                <button type="button" id="clearSql">清空</button>
            </div>
            <div class="query-result">
                <h3>查询结果</h3>
                <div class="result-table" id="queryResultContainer">
                    <!-- 动态结果将在这里显示 -->
                </div>
            </div>
        </div>
    </section>

    <section id="xmind" style="display: none;">
        <h2>XMind转换工具</h2>
        <div class="xmind-converter">
            <h3>XMind 文件转换</h3>
            <form id="xmindForm">
                <input type="file" id="xmindFile" accept=".xmind">
                <select id="templateType">
                    <option value="ones">ones</option>
                    <option value="MeterSphere">MeterSphere</option>
                </select>
                <button type="button" onclick="handleUpload()">开始转换</button>
                <div class="xmind-date card-body">
                    <h3>转换信息</h3>
                    <textarea class="xmind-response" id="xmindResponse" readonly></textarea>
                </div>
                <button type="button" onclick="handleDownload()" id="downloadBtn" disabled>下载Excel</button>
            </form>
            <div id="statusMessage"></div>
        </div>
    </section>

    <section id="testcase" style="display: none;">
        <h2>测试点生成工具</h2>
        <div class="testcase-generator">
            <!--<h3>测试点生成工具</h3>-->
            <form id="testPointForm">
                <input type="file" id="testPointFile" accept=".doc,.docx,.jpg,.png">
                <button type="button" id="generateTestPointBtn">生成测试点</button>
            </form>
            <div class="testcase-result" id="testPointResult" style="display:none;">
                <p id="testPointMsg"></p>
                <div style="margin-top:16px;">
                    <div id="xmindPreviewContainer" style="width:100%;height:500px;border:1px solid #ccc;"></div>
                </div>
                <div style="margin-top:16px;">
                    <input type="text" id="regenerateInput" placeholder="请输入新的生成要求" style="width:60%;padding:6px;">
                    <button type="button" id="regenerateBtn">重新生成</button>
                    <button type="button" id="downloadTestPointBtn" disabled style="margin-left:12px;">下载文件</button>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- xmind-embed-viewer CDN -->
<script src="https://unpkg.com/xmind-embed-viewer/dist/umd/xmind-embed-viewer.js"></script>
</body>
</html>